<template>
  <div class="dialog">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="电话">
        <el-input placeholder="请输入电话" v-model="params.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" style="margin-left: 100px">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading" size="small">
      <el-table-column prop="id" label="序号" align="center" width="90"> </el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column label="推广码" align="center">
        <template slot-scope="scope">
          {{ scope.row.code }} <el-button type="text" size="mini" @click="onLookQR(scope.row)">查看二维码</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" align="center"></el-table-column> 
      <el-table-column prop="userCount" label="车商数量" align="center"></el-table-column>           
      <el-table-column prop="address" label="地址" align="center"></el-table-column>      
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <!-- <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="onEdit(scope.row)">修改密码</el-button>
          <el-button type="text" size="mini" @click="onUpdateGroup(scope.row)">更改权限</el-button>
          <el-button type="text" v-if="scope.row.flag === 1" size="mini"
            @click="onModifyStatus(scope.row, true)">锁定</el-button>
          <el-button type="text" v-if="scope.row.flag === 0" size="mini"
            @click="onModifyStatus(scope.row, false)">解锁</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="block" style="float: left; margin-top: 20px">
      <div>
        <span style="
            padding-top: 10px;
            display: inline-block;
            vertical-align: middle;
            color: #606266;
            font-size: 14px;
          ">显示第{{ this.params.page }}页的{{ this.params.rows }}条记录，总共{{
            this.total
          }}条记录
        </span>
      </div>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination :current-page.sync="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.rows" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

   

    <el-dialog :visible.sync="qrVisible" title="推广二维码" center>
      <div class="QR">
          <vue-qr
            ref="Qrcode"
            :size="191"
            :margin="0"
            :auto-color="true"
            :dot-scale="1"
            :text="appSrc"
          />
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qrVisible = false">关 闭</el-button>
        <el-button
          type="primary"
          class="sureBtn"
          @click="determine('Qrcode')"
          >下 载</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getPartnerList
} from "@/api/user";
import VueQr from "vue-qr";
export default {
  data() {
    return {
      loading: false,
      currentPage4: 4,
      total: 0,
      params: {
        phone: ''
      },
      tableData: [],
      qrVisible: false,
      appSrc: "",
      data: {        
        phone: ''       
      },
    };
  },
  components: {
    VueQr,
  },
  methods: {
    onSearch() {
      this.getData();
    },
    handleSizeChange(val) {
      this.params.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getData();
    },
   
    getData(exportExcel) {
      if (exportExcel) {
        this.params.export = true
      } else {
        this.loading = true;
        this.params.export = false
        let params = {
          pageSize: this.params.rows,
          pageNo: this.params.page,
          filter: [{
            field: 'phone',
            operator: 'LIKE',
            value: this.params.phone
          }]
        }
        getPartnerList(params).then((res) => {
          this.loading = false;
          this.total = res.data.total;
          this.tableData = res.data.rows;
        });
      }
    },
    onExport() {
      this.getData(true)
    },
    onLookQR(row){
      this.data = row;
      this.qrVisible = true;
      this.appSrc = process.env.VUE_APP_QR_URL+"?code="+row.code;
      console.log("qr",this.appSrc)
      this.showqr = true;
    },
    determine(refName) {
      const iconUrl = this.$refs.Qrcode.$el.src;
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      a.download = this.data.phone+"的二维码";
      a.href = iconUrl;
      a.dispatchEvent(event);
      this.dialogVisible = false;
      this.showqr = false;
      //   this.timeAyy = [];
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.my-radio {
  margin-bottom: 10px;
}

.dialog {
  width: 95%;
  height: 100%;
  padding-top: 30px;
  margin-left: 60px;
}
</style>
